<template>
  <el-container>
    <el-header>
      <el-menu mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"
        :default-active="activeIndex" style="height: 60px;">
        <el-submenu index="1" class="totle">
          <template slot="title">
            <el-row class="deli">
              <el-col :span="16">
                <div class="demo-basic--circle">
                  <div class="block">
                    <el-avatar :size="35" :src="imgUrl"></el-avatar>
                  </div>
                </div>
              </el-col>
              <el-col :span="8" style="padding-left:5px;">
                {{username}}
              </el-col>
            </el-row>
          </template>
          <el-menu-item index="1-1" @click="type=101">个人中心</el-menu-item>
          <el-menu-item index="1-2" @click="exit">退出登录</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-col class="demo">
          <el-menu default-active="1" class="demo" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
            <el-submenu index="1">
              <template slot="title">
                <span>商品信息维护</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="1-1" @click="type=666">商品信息维护</el-menu-item>
                <el-menu-item index="1-2" @click="type=777">商品分类信息维护</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title">
                <span>商品库存维护</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="2-1" @click="type=19">入库操作</el-menu-item>
                <el-menu-item index="2-2" @click="type=20">出库操作</el-menu-item>
                <el-menu-item index="2-3" @click="type=21">入库统计</el-menu-item>
                <el-menu-item index="2-4" @click="type=22">出库统计</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title">
                <span>用户信息维护</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="3-1" @click="type=100">用户信息维护</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-col>
      </el-aside>
      <el-main>
        <h2 v-if="type==1">
          欢迎{{username}}登录后台系统
        </h2>
        <!-- <shopshow v-if="type==666"></shopshow>
		<shoptypeshow v-if="type==777"></shoptypeshow> -->
        <shopshow v-if="type==666"></shopshow>
        <shoptypeshow v-if="type==777"></shoptypeshow>
        <inshop v-if="type==19"></inshop>
        <outshop v-if="type==20"></outshop>
        <inecharts v-if="type==21"></inecharts>
        <outecharts v-if="type==22"></outecharts>
        <account v-if="type==100"></account>
        <heads v-if="type==101"></heads>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
  import shopshow from "../components/shops/shopshow.vue"
  import shoptypeshow from "../components/shoptypes/shoptypeshow.vue"
  import inshop from "../components/inventory/inshop.vue"
  import outshop from "../components/inventory/outshop.vue"
  import inecharts from "../components/echarts/inecharts.vue"
  import outecharts from "../components/echarts/outecharts.vue"
  import heads from "../components/user/head.vue"
  import account from "../components/user/account.vue"

  let _this;
  export default {
    created() {
      _this = this;
      if (localStorage.getItem("usid") != null) {
        _this.loginName(localStorage.getItem("usid"))
      } else {
        this.$alert('检测到您还未登录，请先登录后再查看', {
          confirmButtonText: '确定',
          callback: action => {
            _this.$router.push({
              path: "/"
            });
          }
        });
      }
    },
    components: {
      inshop,
      outshop,
      inecharts,
      outecharts,
      account,
      heads,
      shopshow,
      shoptypeshow
    },
    data() {
      return {
        activeIndex: "1",
        imgUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
        type: 1,
        username: "用户",
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      exit() {
        if (localStorage.getItem("usid") != null) {
          this.$confirm('是否确认退出登录?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
          }).then(() => {
            localStorage.clear()
            this.username = "用户"
            this.imgUrl = "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
            if (confirm("检测到您现在还未登录，是否选择登录？")) {
              _this.$router.push({
                path: "/"
              })
            } else {
              this.$message({
                type: 'success',
                message: '退出成功!',
              });
            }
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消退出登录'
            });
          });
        } else {
          this.$alert("您已退出登录，无法重复退出", {
            confirmButtonText: '确定',
          });
        }
      },
      loginName(usid) {
        _this.$axios.post("/user/selectById", {
            usid: usid
          })
          .then(function(param) {
            console.log("userselectparam")
            console.log(param)
            if (param.data.usname != null) {
              _this.username = param.data.usname
            }
            if (param.data.usimg != null) {
              _this.imgUrl = param.data.usimg
            }
          })
          .catch(function(err) {
            console.log(err)
          })
      }
    },
  };
</script>
<style>
  .el - header,
  .el - footer {
    background - color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
    height: 100%;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
    padding: 0;
  }

  .el-container {
    height: 100%;
  }

  .totle {
    margin-left: 1200px;
  }

  .el-header {
    padding: 0;
  }

  .demo {
    height: 100%;
    width: 100%;
  }

  .deli {
    display: inline-flex;
  }
</style>
